<template>
  <div>
    <h1>reactive函数</h1>
    <hr />
    <ul>
      <li>{{ name }},{{ age }}</li>
      <li>
        <button @click="change">修改年龄</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
import { reactive , toRefs } from 'vue'
export default {
  setup() {
    // vue3代码入口

    // 1. 从vue框架中导入reactive函数
    // 2. 在setup函数中调用reactive函数并将对象数据传入
    // 3. 在setup函数中把reactive函数调用完毕之后的返回值以对象的形式返回出去
    const person = reactive({
      name: '小红',
      age: 18,
    })
    // 定义方法 -> 修改变量
    const change = () => {
      person.age = 22
    }

    // 解构后保有响应式   使用...toRefs()进行包裹
    return { ...toRefs(person),change }
  },
}
</script>

<style></style>
